<html>
<head>
    <title>烟火 Web</title>
    <meta charset="UTF-8">
    <script src="lib/jquery.min.js"></script>
    <script src="lib/vue.global.prod.min.js"></script>
    <script src="index.js"></script>
</head>
<style>
#main {
    width: 100%;
    height: 100%;
    display: flex;
}
#left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#right {
    width: 80%;
    height: 100%;
}
#canvas
{
    width: 100%;
    height: 100%;
}

.flex {
    display: flex;
}
</style>
<body style="margin:0;">
    <div id="main">
        <div id="left">
            <div class="flex">
                <div>模拟速度：{{parseFloat(timeScale).toFixed(2)}}</div>
                <input type="range" min="0.01" max="1" step="0.01" v-model="timeScale"/>
            </div>
            <div class="flex">
                <div>重力加速度：{{parseFloat(g).toFixed(2)}}</div>
                <input type="range" min="0.01" max="5" step="0.01" v-model="g"/>
            </div>
            <div class="flex">
                <div>阻力系数：{{parseFloat(airResistParam).toFixed(1)}}</div>
                <input type="range" min="1" max="5" step="0.1" v-model="airResistParam"/>
            </div>
            <p>按下『空格』发射烟花~</p>
        </div>
        <div id="right">
            <canvas id="canvas" width="800" height="800"></canvas>
        </div>
    </div>
</body>
</html>